<script setup>
/* eslint-disable */
import { reactive, watchEffect } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
import { useIndexStore } from "@/stores/indexStore";
import { OpenChildrenPage } from "@/hook/routerHandle.js";
const useStore = useIndexStore();
const data = reactive({
  icon: [
    {
      path: "/shopList",
      id: 2,
      imgSrc: "/images/MenusNavIcon/Home.png",
      imgSrcActive: "/images/MenusNavIcon/Home_active.png",
      title: "MenusNav.shop",
    },
    {
      path: "/HomeList",
      id: 1,
      imgSrc: "/images/MenusNavIcon/shop.png",
      imgSrcActive: "/images/MenusNavIcon/shop_active.png",
      title: "MenusNav.home",
    },
    {
      path: "/messageList",
      id: 3,
      imgSrc: "/images/MenusNavIcon/message.png",
      imgSrcActive: "/images/MenusNavIcon/message_active.png",
      title: "MenusNav.message",
    },
    {
      path: "/CartView",
      id: 4,
      imgSrc: "/images/MenusNavIcon/cart.png",
      imgSrcActive: "/images/MenusNavIcon/cart_active.png",
      title: "MenusNav.cart",
    },
    {
      path: "/MeView",
      id: 5,
      imgSrc: "/images/MenusNavIcon/Me.png",
      imgSrcActive: "/images/MenusNavIcon/Me_active.png",
      title: "MenusNav.me",
    },
  ],
});

const Tapto = (path, id) => {
  OpenChildrenPage(path);
  useStore.isShow = id;
};

watchEffect(() => {
  for (const item of data.icon) {
    if (item.path == route.path) {
      useStore.isShow = item.id;
      // console.log("route.path22:", route.path);
    }
  }
});
</script>

<template>
  <RouterView v-slot="{ Component, route }">
    <KeepAlive :max="10">
      <component
        :is="Component"
        v-if="route.meta.keepAlive"
        :key="route.name"
      />
    </KeepAlive>

    <component :is="Component" v-if="!route.meta.keepAlive" :key="route.name" />
  </RouterView>

  <footer class="footer">
    <div
      class="nav-icon"
      v-for="(item, index) in data.icon"
      :key="index"
      @click="Tapto(item.path, item.id)"
    >
      <div class="active-box" v-show="useStore.isShow == item.id">
        <img :src="item.imgSrcActive" alt="" class="active-icon" />
      </div>
      <div class="default-box" v-show="!(useStore.isShow == item.id)">
        <img :src="item.imgSrc" alt="" class="default-icon" />
      </div>
      <p class="title">{{ $t(item.title) }}</p>
    </div>
  </footer>
</template>

<style lang="scss" scoped>
.footer {
  position: fixed;
  z-index: 999;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 50rem;
  border-top: 1rem solid #e5e5e5;
  background-color: #fff;

  .nav-icon {
    position: relative;
    flex: 1;
    height: 100%;

    .default-box {
      position: absolute;
      top: 8rem;
      left: calc(50% - 12rem);
      width: 24rem;
      height: 24rem;

      .default-icon {
        width: 100%;
      }
    }

    .active-box {
      position: absolute;
      top: 8rem;
      left: calc(50% - 12rem);
      width: 24rem;
      height: 24rem;

      .active-icon {
        width: 100%;
      }
    }

    .title {
      height: 50rem;
      // margin: 0 auto;
      text-align: center;
      line-height: 82rem;
      font-size: 12rem;
    }
  }
}
</style>
